import React, { FC, useState } from "react";
import { Menu, Switch } from "antd";
import "antd/dist/antd.css";

const Navigation: FC<navigationProps> = (props: any) => {
  const { SubMenu } = Menu;
  //接受父组件传来的状态
  const {
    data,
    primaryNavigationProps,
    childrenProps,
    handleClick,
    setChildrenKey,
    childrenItem,
    isDeepMenu,
    deepProps,
    deepItem,
    setDeepKey,
    style,
  } = props;
  const rootSubmenuKeys = [];
  const [openKeys, setOpenKeys] = useState([]);
  const [theme, setTheme] = useState<any>("dark");
  const changeTheme = (value) => {
    setTheme(value ? "dark" : "light");
  };
  const onOpenChange = (keys) => {
    const latestOpenKey = keys.find((key) => openKeys.indexOf(key) === -1);
    if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
      setOpenKeys(keys);
    } else {
      setOpenKeys(latestOpenKey ? [latestOpenKey] : []);
    }
    
  };
  let count = 0;
  
  return (
    <div className="Navigation">
      {/* <Switch
        checked={theme === "dark"}
        onChange={changeTheme}
        checkedChildren="Dark"
        unCheckedChildren="Light"
      /> */}
      {/* <br />
      <br /> */}
      <Menu
        mode="inline"
        openKeys={openKeys}
        onOpenChange={onOpenChange}
        onClick={(ev) => {
          handleClick(ev);
        }}
        style={style}
        theme="light"
      >
        {
          data && data.map((item, index) => {
            rootSubmenuKeys.push(item[primaryNavigationProps]);
            return (
              <SubMenu
                key={item[primaryNavigationProps]}
                title={item[primaryNavigationProps]}
              >
                {
                  typeof item[childrenProps] === "string" ? JSON.parse(item[childrenProps]).map((ite) => {
                      count++;
                      if(isDeepMenu&&deepProps){
                        return (
                          <SubMenu key={ite[childrenItem] || ite} title={ite[childrenItem] || ite}>
                            {
                              typeof ite[deepProps] === "string" ? JSON.parse(ite[deepProps]).map((deep,d)=>{
                                count++;
                                return (
                                  <Menu.Item key={deep[setDeepKey] || `${item[primaryNavigationProps]}-${ite[childrenItem] || ite}-${deep[deepItem] || deep}`}>
                                    {deep[deepItem] || deep}
                                  </Menu.Item>
                                )
                              }):ite[deepProps].map((deep,d)=>{
                                count++;
                                return (
                                  <Menu.Item key={deep[setDeepKey] `${item[primaryNavigationProps]}-${ite[childrenItem] || ite}-${deep[deepItem] || deep}`}>
                                    {deep[deepItem] || deep}
                                  </Menu.Item>
                                )
                              })
                            }
                          </SubMenu>
                        )
                      }
                      return (
                        <Menu.Item key={ite[setChildrenKey] || `${item[primaryNavigationProps]}-${ite[childrenItem] || ite}`}>
                          {ite[childrenItem] || ite}
                        </Menu.Item>
                      );
                    })
                  : item[childrenProps].map((ite) => {
                      count++;
                      if (isDeepMenu && deepProps) {
                        return (
                          <SubMenu key={ite[childrenItem] || ite} title={ite[childrenItem] || ite}>
                            {
                              typeof ite[deepProps] === "string" ? JSON.parse(ite[deepProps]).map((deep,d)=>{
                                count++;
                                return (
                                  <Menu.Item key={deep[setDeepKey] || `${item[primaryNavigationProps]}-${ite[childrenItem] || ite}-${deep[deepItem] || deep}`}>
                                    {deep[deepItem] || deep}
                                  </Menu.Item>
                                )
                              }):ite[deepProps].map((deep,d)=>{
                                count++
                                return (
                                  <Menu.Item key={deep[setDeepKey] || `${item[primaryNavigationProps]}-${ite[childrenItem] || ite}-${deep[deepItem] || deep}`}>
                                    {deep[deepItem] || deep}
                                  </Menu.Item>
                                )
                              })
                            }
                          </SubMenu>
                        )
                      }
                      return (
                        <Menu.Item key={ite[setChildrenKey] || `${item[primaryNavigationProps]}-${ite[childrenItem] || ite}`}>
                          {ite[childrenItem] || ite}
                        </Menu.Item>
                      );
                    })
                }
              </SubMenu>
            );
          })
        }
      </Menu>
    </div>
  );
};
export default Navigation;
